<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="0px" class="form" label-position='left'>
                <div class="form-title">积分抵扣规则设置</div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;最高抵扣金额限制</span>
                        <span class="note-level"><font color="red">&nbsp;&nbsp;&nbsp;&nbsp;注：仅抵扣会员服务的底价部分。</font></span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="月收会员最高可抵金额：" prop="obj.deductMoneys[0].price" :rules="rules.deduction" label-width="190px">
                                    <span>最高抵扣&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="dataForm.obj.deductMoneys[0].price" :maxlength="3" placeholder="" style="width:12%;"></el-input><span>&nbsp;&nbsp;&nbsp;&nbsp;元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="半年收会员最高可抵金额：" prop="obj.deductMoneys[1].price" :rules="rules.deduction" label-width="190px">
                                    <span>最高抵扣&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="dataForm.obj.deductMoneys[1].price" :maxlength="3" placeholder="" style="width:12%;"></el-input><span>&nbsp;&nbsp;&nbsp;&nbsp;元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="24">
                                <el-form-item label="年收会员最高可抵金额：" prop="obj.deductMoneys[2].price" :rules="rules.deduction" label-width="190px">
                                    <span>最高抵扣&nbsp;&nbsp;&nbsp;&nbsp;</span><el-input v-model="dataForm.obj.deductMoneys[2].price" :maxlength="3" placeholder="" style="width:12%;"></el-input><span>&nbsp;&nbsp;&nbsp;&nbsp;元</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;积分与现金比例</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21" class="integral-money">
                            <el-col :span="3">
                                <el-form-item label="" prop="obj.pointMoney" label-width="0">
                                    <el-input v-model="dataForm.obj.pointMoney" :maxlength="5" placeholder="请输入积分" style="width:100%;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="1" align="center" class="scale-out"><span class="scale">:</span></el-col>
                            <el-col :span="3">
                                <el-form-item label="" label-width="0">
                                    <span>1元</span>
                                    <!-- <el-input v-model="dataForm.money" :disabled="true" :maxlength="5" placeholder="抵扣多少现金" style="width:100%;"></el-input> -->
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level"><font color="red">*</font>&nbsp;适用收费产品</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="22">
                                <el-form-item label="" prop="checkValue" >
                                    <el-checkbox-group v-model="dataForm.checkValue"> 
                                        <el-checkbox v-for="item in dataForm.chargeProduct" :label="item.name" :key="item.id" name='checkValue'></el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button type="primary" @click="submitForm('dataForm')">保存</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {
  getMembershipScoreDetail,
  updateMembershipScoreDetail
} from 'api/integralManage';
export default {
    name: 'newIntegralDeduction',
    components: { Levelbar },
    data() {
        return {
            loading: false,
            rules: {
                deduction: [
          { required: true, message: '内容不能为空', trigger: 'change,blur' },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: '格式不正确',
                        trigger: 'change,blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (Number(value) < 1 || Number(value) > 100) {
                                callback(new Error('请输入1~100的整数'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change,blur'
                    }
                ],
                pointMoney: [
          { required: true, message: '内容不能为空', trigger: 'change,blur' },
                    {
                        pattern: /^[1-9]\d{2,5}$/,
                        message: '请输入100~10000的整数',
                        trigger: 'change,blur'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (Number(value) < 100 || Number(value) > 10000) {
                                callback(new Error('请输入100~10000的整数'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'change,blur'
                    }
                ],
                checkValue: [
                    {
                        type: 'array',
                        required: true,
                        message: '请选择收费产品',
                        trigger: 'change'
                    }
                ]
            },
            dataForm: {
                chargeProduct: [
                    {
                        name: '会员服务',
                        id: '123554'
                    }
                ],
                checkValue: [],
                obj: {
                    deductMoneys: [
                        {
                            price: '',
                            value:'1',
                            name:'月'
                        },
                        {
                            price: '',
                            value:'6',
                            name:'半年'
                        },
                        {
                            price: '',
                            value:'12',
                            name:'年'
                        }
                    ]
                },

                newDeductMoneys: []
            }
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.loading = true;
            getMembershipScoreDetail()
        .then(data => {
            this.loading = false;
            if (data.data.content.deductMoneys.length !== 0) {
                this.dataForm.obj = data.data.content;
                this.delZero(this.dataForm.obj.deductMoneys);

                //目前只有一个且返回的是字符
                this.dataForm.chargeProduct.forEach(e =>{
                    if(e.id == data.data.content.serviceType){
                        this.dataForm.checkValue.push(e.name)
                    }
                })
                
            }
        })
        .catch(() => {
            this.loading = false;
        });
        },
        submitForm(dataForm) {
            this.$refs[dataForm].validate(valid => {
                if (valid) {
                    this.$confirm('确定要保存积分抵扣的规则，保存后即刻生效请谨慎操作~!', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: ' '
                    }).then(() => {
                        // 拷贝一份，增加.00不会影响原数据
                        var copyMoneys = JSON.parse(JSON.stringify(this.dataForm.obj.deductMoneys));
                        this.loading = true;
                        // 目前只有会员 ，后期后台提供接口
                        updateMembershipScoreDetail(
                          this.filterType(this.dataForm.checkValue),
                          this.dataForm.obj.pointMoney,
                          JSON.stringify(this.fifterZer(copyMoneys))
                        ).then(data => {
                            this.loading = false;
                            this.init();
                            this.$message({
                                message: '保存成功！',
                                type: 'success'
                            });
                        }).catch(() => {
                            this.loading = false;
                        });
                    }).catch(() => {
                        this.$message({ type: 'info', message: '已取消' });
                    });
                } else {
                    return false;
                }
            });
        },
        filterType(v){
            var str = '';
            this.dataForm.chargeProduct.forEach(e =>{
                v.forEach(s =>{
                    if(e.name == s){
                        str = e.id;
                        //目前只有一个id 后期看是什么格式
                        // return str.push(e.id)
                    }
                })
            })
            return str;
        },
        fifterZer(v) {
            v.forEach(e => {
                e.price += '.00';
            });
            return v;
        },
        delZero(v) {
            v.forEach(e => {
                if (e.price.indexOf('.00') != -1) {
                    e.price = e.price.split('.00')[0];
                }
            });
            return v;
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss"  scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  font-size: 12px;
  color: #333;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px 20px;
    @include showTitle();
    .form-title {
      padding-top: 8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .note-level {
      font-size: 12px;
    }
    .form {
      .form-item {
        .form-item-title {
          margin: 40px 0;
          font-size: 14px;
          color: #333;
          line-height: 14px;
          border-left: 4px solid #ff5e2c;
          text-indent: 16px;
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 12px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
        }
        .form-content {
          margin-left: 35px;
          .tip {
            font-size: 12px;
            color: #aaa;
          }
          .scale-out {
            margin-top: 4px;
            .scale {
              font-size: 20px;
              color: #aaa;
            }
          }
          .integral-money {
            display: flex;
          }
        }
        .footer {
          text-align: center;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>